let pics_switch = document.getElementsByClassName('pics_switch')[0];  //轮播图元素
let pics_img = document.getElementsByClassName('pics_img')[0];  //图片父元素
let piceImgList = document.querySelectorAll('.pics_img img');   //图片集合
let dotItemList = document.getElementsByClassName('dot-item');  //小圆点集合
let previous = document.getElementsByClassName('previous')[0];  //上一页
let next = document.getElementsByClassName('next')[0];  //下一页
let currentThis = 0;    //当前的图片坐标
let piceImgWidth = 0;   //每张的图片宽度
let interval = null;
intervalState();

// 监听鼠标经过轮播图
pics_switch.onmouseover = function () {
    // 停止循环
    clearInterval(interval);
}
// 监听鼠标离开轮播图
pics_switch.onmouseout = function () {
    // 开始循环
    intervalState()
}
for (let i = 0; i < dotItemList.length; i++) {
    dotItemList[i].onmouseover = function () {
        currentThis = i;
        movePicture();
    }
}



// 循环方法
function intervalState() {
    interval = setInterval(function () {
        if (currentThis >= piceImgList.length - 1) {
            currentThis = 0;
        } else {
            currentThis++;
        }
        movePicture()
    }, 3000);
}
// 初始化
function init() {
    piceImgWidth = piceImgList[0].width;
}
// 点击上一页
previous.onclick = function () {
    if (currentThis <= 0) {
        currentThis = piceImgList.length - 1;
    } else {
        currentThis--;
    }
    movePicture()
}
// 点击下一页
next.onclick = function () {
    if (currentThis >= piceImgList.length - 1) {
        currentThis = 0;
    } else {
        currentThis++;
    }
    movePicture()
}

// 移动图片和小圆点
function movePicture() {
    //  获取每张图片宽度
    piceImgWidth = piceImgList[0].width;
    pics_img.style.left = -currentThis * piceImgWidth + 'px';
    for (let i = 0; i < dotItemList.length; i++) {
        if (i === currentThis) {
            dotItemList[i].setAttribute('class', 'dot-item active');
        } else {
            dotItemList[i].setAttribute('class', 'dot-item');
        }
    }
} 